<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-form
        :model="formData"
        :rules="formRules"
        ref="formData"
        label-width="164px"
        class="demo-ruleForm"
      >
        <!-- 身份信息 -->
        <el-row>
          <el-col class="identityInfoTitle titleInfo">
            <div>身份信息</div>
          </el-col>
        </el-row>

        <el-row class="identityInfo">
          <el-col :span="18">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="employeeName" label="人员姓名：">
                    <el-input
                      v-model="formData.employeeName"
                      id="employeeName"
                      disabled
                      placeholder=""
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item prop="idcard" label="身份证号：">
                    <el-input
                      v-model="formData.idcard"
                      id="idcard"
                      disabled
                      placeholder=""
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="employeeSex" label="人员性别：">
                    <el-select
                      class="selectWidth"
                      v-model="formData.employeeSex"
                      id="employeeSex"
                      disabled
                      placeholder=""
                    >
                      <el-option
                        v-for="item in sexOption"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item prop="employeeBirth" label="出生日期：">
                    <el-input
                      v-model="formData.employeeBirth"
                      id="employeeBirth"
                      disabled
                      placeholder=""
                      value-format="yyyy-MM-dd"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="employeeNation" label="人员民族：">
                    <el-select
                      class="selectWidth"
                      v-model="formData.employeeNation"
                      id="employeeNation"
                      disabled
                      placeholder=""
                    >
                      <el-option
                        v-for="item in nationOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="家庭住址：" prop="homeAddress">
                    <el-input
                      v-model="formData.homeAddress"
                      id="homeAddress"
                      disabled
                      placeholder=""
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="6">
            <input name="image64" type="hidden" id="image64" />
            <div class="readIdCardBox">
              <ul>
                <li>
                  <img
                    :src="idcardUrl ? idcardUrl : errorPath"
                    id="cardImg"
                    style="width: 100px"
                  />
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <!-- 基础信息 -->
        <el-row>
          <el-col class="basicInfoTitle titleInfo">
            <div>基础信息</div>
          </el-col>
        </el-row>
        <el-row class="identityInfo">
          <el-col :span="18">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="11">
                  <el-form-item
                    label="工资卡银行："
                    prop="bankId"
                    :rules="
                      isNeedBankId == 0
                        ? [{ required: false }]
                        : formRules.bankId
                    "
                  >
                    <el-select
                      class="selectWidth"
                      v-model="formData.bankId"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in bankOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item
                    label="银行卡号："
                    prop="accountId"
                    :rules="
                      isNeedAccountId == 0
                        ? [
                            {
                              required: false,
                              pattern: /^[^\u4e00-\u9fa5]{0,}$/,
                              message: '请输入正确格式的账号',
                              trigger: 'blur',
                            },
                          ]
                        : formRules.accountId
                    "
                  >
                    <el-input
                      v-model="formData.accountId"
                      @blur="formData.accountId = changeValue($event)"
                      placeholder="请输入银行卡号"
                      maxlength="64"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item
                    label="手机号码："
                    prop="tel"
                    :rules="
                      isNeedTel == 0
                        ? [
                            {
                              required: false,
                              pattern: /^1[3456789]\d{9}$/,
                              message: '请输入正确的手机号码',
                              trigger: 'blur',
                            },
                          ]
                        : formRules.tel
                    "
                  >
                    <el-input
                      v-model="formData.tel"
                      @blur="formData.tel = changeValue($event)"
                      placeholder="请输入手机号码"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item
                    label="文化程度："
                    prop="edu"
                    :rules="
                      isNeedEdu == 0 ? [{ required: false }] : formRules.edu
                    "
                  >
                    <el-select
                      class="selectWidth"
                      v-model="formData.edu"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in eduOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item
                    label="政治面貌："
                    prop="politicalStatus"
                    :rules="
                      isNeedPoliticalStatus == 0
                        ? [{ required: false }]
                        : formRules.politicalStatus
                    "
                  >
                    <el-select
                      class="selectWidth"
                      v-model="formData.politicalStatus"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in politicalOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item
                    label="婚姻状况："
                    prop="maritalStatus"
                    :rules="
                      isNeedMaritalStatus == 0
                        ? [{ required: false }]
                        : formRules.maritalStatus
                    "
                  >
                    <el-select
                      class="selectWidth"
                      v-model="formData.maritalStatus"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in marrigeOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="readIdCardBox">
              <ul>
                <li>
                  <img
                    :src="collectImg ? collectImg : errorPath"
                    style="width: 100px"
                  />
                </li>
                <li style="margin-top: 10px" id="" @click="faceCollection()">
                  <!-- <img src="../../../static/img/face/collect.png" style="cursor:pointer;width: 86px;height: 21px;"/> -->
                  <div class="btnBox fontBorderTheme">
                    <div class="imgBox bgcTheme">
                      <img
                        class="iconImg"
                        style="width: 10px; height: 10px"
                        src="../../../static/img/employee/head.png"
                        alt=""
                      />
                    </div>
                    <div class="textBox fontColorTheme">采集人像</div>
                  </div>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <!-- 合同信息 -->
        <el-row>
          <el-col class="contractInfoTitle titleInfo">
            <div>合同信息</div>
          </el-col>
        </el-row>
        <el-row class="identityInfo">
          <el-col :span="18">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="11">
                  <el-form-item label="项目名称：" prop="projectName">
                    <el-input
                      v-model="formData.projectName"
                      placeholder=""
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="参建单位：" prop="projectCompanyId">
                    <el-select
                      :disabled="isFB"
                      class="selectWidth"
                      v-model="formData.projectCompanyId"
                      @change="handleChange"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in usccOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="选择班组：" prop="groupId">
                    <el-select
                      class="selectWidth"
                      v-model="formData.groupId"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in groupIdOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item prop="type">
                    <span slot="label">
                      人员类型
                      <el-tooltip
                        content="请将选择类型为非务工人员与班组长时，将其归属为项目组，如无项目组请前往班组管理新建"
                        placement="top"
                        effect="dark"
                      >
                        <i class="icon iconfont iconhuabanfuben"></i>
                      </el-tooltip>
                      ：
                    </span>
                    <el-select
                      class="selectWidth"
                      v-model="formData.type"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in typeOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="工种：" prop="workType">
                    <el-select
                      class="selectWidth"
                      v-model="formData.workType"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in workTypeOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item prop="date" label="雇佣周期：">
                    <el-date-picker
                      v-model="formData.date"
                      type="daterange"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"
                      disabled
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item
                    label="考勤卡号："
                    prop="attNo"
                    :rules="
                      isNeedAttNo == 0
                        ? [
                            {
                              required: false,
                              pattern: /^\d{11}$/,
                              message: '请输入11位纯数字',
                              trigger: 'blur',
                            },
                          ]
                        : formRules.attNo
                    "
                  >
                    <el-input
                      v-model.trim="formData.attNo"
                      placeholder="请输入考勤卡号"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item
                    label="计量单位："
                    :rules="
                      isNeedUnit == 0 ? [{ required: false }] : formRules.unit
                    "
                    prop="unit"
                  >
                    <el-select
                      class="selectWidth"
                      v-model="formData.unit"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in unitOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item
                    label="计量单价："
                    prop="price"
                    :rules="
                      isNeedPrice == 0
                        ? [
                            {
                              required: false,
                              pattern: /^\d{1,7}(\.\d{0,2})?$/,
                              message: '已超过金额最大值，请重新输入',
                              trigger: 'blur',
                            },
                          ]
                        : formRules.price
                    "
                  >
                    <el-input
                      v-model="formData.price"
                      placeholder="请输入计量单价"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="1" class="wageUnit"> 元 </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="上传合同或资质附件："
              :rules="
                isNeedUpLoadFile == 0
                  ? [{ required: false }]
                  : formRules.upLoadFile
              "
              prop="upLoadFile"
            >
              <uploadAnnex
                @getFileList="getFileList"
                :limitationFactor="limitationFactor"
                @getFile="getFile"
                :upLoadFile="upLoadFile"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" v-model="formData.contractImgUrl">
            <uploadResult
              style="margin-left: 120px"
              :resultList="upLoadFile"
              @callBackResult="getFile"
            />
          </el-col>
        </el-row>
        <el-row style="text-align: center; margin-top: 20px">
          <el-col :span="18">
            <el-form-item>
              <el-button
                class="commonBut saveBtn"
                type="primary"
                @click="saveToList"
                :loading="isSaveLoading"
                >保存</el-button
              >
              <el-button class="commonBut" @click="goBack">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- <faceCollect :dialogFormVisible = "isCollect" @closeDialog="hiddenDialog" v-if = "isShowCollect" @collectUrlFunc="getSonData"></faceCollect>  -->
  </div>
</template>

<script>
import topTitle from '@/components/publicCom/topTitle'
// import faceCollect from "@/components/emptyFile/faceCollect";
import common from '../../kits/common'
import uploadResult from '@/components/publicCom/uploadResult'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'employeeEditJz',
  timerID: 0,
  socket: null,
  keepAlive: null,
  components: {
    topTitle,
    uploadResult,
  },
  data() {
    var checkUpLoadFile = (rule, value, callback) => {
      if (this.upLoadFile.length == 0) {
        return callback(new Error('请上传合同附件'))
      } else {
        callback()
      }
    }
    return {
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '合同附件支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      titleText: '修改工人信息',
      back: true,
      formData: {
        employeeName: '', //人员姓名
        idcard: '', //身份证号
        employeeSex: '', //性别
        employeeBirth: '', //出生日期
        tel: '', //手机号码
        employeeNation: '', //名族
        homeAddress: '', //家庭住址
        edu: '', //教育程度
        politicalStatus: '', //政治面貌
        maritalStatus: '', //婚姻状况
        bankId: '', //工资银行
        accountId: '', //工资卡号
        projectName: '', //项目名称
        uscc: '', //参建单位
        projectCompanyId: '', //参建单位区分建设方/施工方
        type: '', //人员类型
        groupId: '', //班组
        workType: '', //工种
        date: [], //雇佣周期
        attNo: '', //考勤卡号
        unit: '', //计量单位
        price: '', //计量单价
        // startDate: "", //雇佣开始时间
        // endDate: "" , //雇佣结束时间
        employeeImgUrl: [], //员工身份证头像
        faceCameraPhoto: '[]',
      },
      oldType: '',
      idcardUrl: '', //员工身份证头像
      errorPath: require('../../../static/img/employee/card.png'),
      sexOption: [],
      nationOptions: [],
      bankOptions: [],
      eduOptions: [],
      marrigeOptions: [],
      usccOptions: [],
      typeOptions: [],
      politicalOptions: [],
      workTypeOptions: [],
      unitOptions: [],
      formRules: {
        date: [
          {
            required: true,
            message: '请选择雇佣周期',
            trigger: 'blur',
          },
        ],
        tel: [
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        accountId: [
          {
            required: true,
            // pattern: /^\d{15,19}$/,
            pattern: /^[^\u4e00-\u9fa5]{0,}$/,
            message: '请输入正确格式的账号',
            trigger: 'blur',
          },
        ],
        uscc: [
          {
            required: true,
            message: '请选择参建单位',
            trigger: 'blur',
          },
        ],
        type: [
          {
            required: true,
            message: '请选择人员类型',
            trigger: 'blur',
          },
        ],
        groupId: [
          {
            required: true,
            message: '请选择班组',
            trigger: 'blur',
          },
        ],
        workType: [
          {
            required: true,
            message: '请选择工种类型',
            trigger: 'blur',
          },
        ],
        projectName: [
          {
            required: true,
            message: '项目名称不能为空',
            trigger: 'blur',
          },
        ],
        price: [
          {
            required: true,
            pattern: /^\d{1,7}(\.\d{0,2})?$/,
            message: '已超过金额最大值，请重新输入',
            trigger: 'blur',
          },
        ],
        attNo: [
          {
            required: true,
            pattern: /^\d{11}$/,
            message: '请输入11位纯数字',
            trigger: 'blur',
          },
        ],
        bankId: [
          {
            required: true,
            message: '请选择工资卡银行',
            trigger: 'change',
          },
        ],
        edu: [
          {
            required: true,
            message: '请选择文化程度',
            trigger: 'change',
          },
        ],
        politicalStatus: [
          {
            required: true,
            message: '请选择政治面貌',
            trigger: 'change',
          },
        ],
        maritalStatus: [
          {
            required: true,
            message: '请选择婚姻状况',
            trigger: 'change',
          },
        ],
        unit: [
          {
            required: true,
            message: '请选择计量单位',
            trigger: 'change',
          },
        ],
        upLoadFile: [
          {
            required: true,
            validator: checkUpLoadFile,
            trigger: 'blur',
          },
        ],
        projectCompanyId: [
          {
            required: true,
            message: '请选择参建单位',
            trigger: 'blur',
          },
        ],
      },
      employeeId: '', //务工id
      contractId: '', //合同id
      projectId: '', //列表跳过来的项目id
      upLoadFile: [], //附件
      cardFile: [],
      srcList: [],
      oldSrcList: [],
      isSaveLoading: false, // 保存loading
      qrCode_Url: '', //二维码
      czSrc: require('../../../static/img/employee/card.png'),
      canLogin: false,
      isCollect: false,
      isShowCollect: false,
      sonCollectFile: [],
      collectImg: require('../../../static/img/employee/card.png'),
      currentPage: '',
      status: '',
      list: [],
      isNeedHomeAddress: '',
      isNeedBankId: '',
      isNeedAccountId: '',
      isNeedTel: '',
      isNeedEdu: '',
      isNeedPoliticalStatus: '',
      isNeedMaritalStatus: '',
      isNeedUnit: '',
      isNeedAttNo: '',
      isNeedPrice: '',
      isNeedUpLoadFile: '',
    }
  },
  async created() {
    await this.getIsNeed() //是否必填
    this.$store.commit('SET_INFO', ['groupIdOptions', []])

    this.isFB = this.$route.query.isFB
    if (this.isFB) {
      this.$store.commit('set_active_index', '/home/employee/projectEmployeeFb')
      this.$store.state.activeMenu = '/home/employee/projectEmployeeFb'
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/employee/projectEmployeeFb',
        newUrl: this.$router.currentRoute.fullPath,
      })
    } else {
      this.$store.commit('set_active_index', '/home/employee/projectEmployeeQY')
      this.$store.state.activeMenu = '/home/employee/projectEmployeeQY'
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/employee/projectEmployeeQY',
        newUrl: this.$router.currentRoute.fullPath,
      })
    }
    this.employeeId = this.$route.query.employeeId
    this.contractId = this.$route.query.contractId
    this.projectId = this.$route.query.projectId
    this.formData.projectName = this.$route.query.projectName
    this.currentPage = this.$route.query.currentPage
    this.status = this.$route.query.status
    //参建单位
    this.getUscc()
    //字典表下拉框
    this.getSelectData('SEX')
    this.getSelectData('NATION')
    this.getSelectData('EDU')
    this.getSelectData('MARRIAGE')
    this.getSelectData('POLITICAL')
    this.getSelectData('BANK_TYPE')
    // this.getSelectData("EMPLOYEE_TYPE"); //人员类型
    this.getSelectData('WORKER_TYPE') //工种
    this.getSelectData('UNIT') //计量单位
    this.getDetail(this.employeeId, this.contractId) //刘琅详情传employeeId
    this.getBatchInfo(this.employeeId, this.contractId) //杨洁详情传 contractId
    //黄石手机号码为必填
    // if(this.isHsUser()){
    //   this.formRules.tel[0].required = true;
    // }else{
    //   this.formRules.tel[0].required = false;
    // }
  },
  watch: {
    $route(to, from) {
      if (this.$route.name == 'employeeEditJz') {
        this.$store.commit(
          'set_active_index',
          '/home/employee/projectEmployeeQY'
        )
        this.$store.state.activeMenu = '/home/employee/projectEmployeeQY'
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/employee/projectEmployeeQY',
          newUrl: this.$router.currentRoute.fullPath,
        })
        this.employeeId = this.$route.query.employeeId
        this.contractId = this.$route.query.contractId
        this.projectId = this.$route.query.projectId
        this.formData.projectName = this.$route.query.projectName

        //参建单位
        this.getUscc()
        //字典表下拉框
        this.getSelectData('SEX')
        this.getSelectData('NATION')
        this.getSelectData('EDU')
        this.getSelectData('MARRIAGE')
        this.getSelectData('POLITICAL')
        this.getSelectData('BANK_TYPE')
        // this.getSelectData("EMPLOYEE_TYPE"); //人员类型
        this.getSelectData('WORKER_TYPE') //工种
        this.getSelectData('UNIT') //计量单位
        this.getDetail(this.employeeId, this.contractId) //刘琅详情传employeeId
        this.getBatchInfo(this.employeeId, this.contractId) //杨洁详情传 contractId
      }
    },
  },
  computed: {
    ...mapState(['groupIdOptions']),
  },
  methods: {
    ...mapActions(['getGroupList']),
    goBack() {
      if (this.isFB) {
        this.$router.push({
          path: '/home/employee/projectEmployeeFb',
          name: 'projectEmployeeFb',
          query: {
            projectId: this.projectId,
          },
        })
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/employee/projectEmployeeFb',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push({
          name: 'projectEmployeeQY',
          path: '/home/employee/projectEmployeeQY',
          query: {
            projectId: this.projectId,
          },
        })
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/employee/projectEmployeeQY',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    getUscc() {
      this.axios({
        method: 'post',
        // url: "api-p/projectcompany/expand/findbyprojectid",
        // url:"api-c/projectcompany/expand/getprojectcompany",
        url: 'api-p/projectcompany/expand/findprojectcompany',
        data: {
          projectId: this.projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.usccOptions = response.data.result
          }
        })
        .catch((error) => {
          this.$message.error('参建单位数据获取失败')
        })
    },
    handleChange(value) {
      var projectCompanyId = this.formData.projectCompanyId
      var arr = this.usccOptions.filter((v) => {
        if (v.code.indexOf(value) > -1) {
          return v
        }
      })
      if (arr.length > 0 && arr[0].type == '0') {
        this.typeOptions = [
          { name: '总监', code: '810' },
          { name: '监理', code: '820' },
        ]
        this.formData.type = ''
      } else {
        this.getSelectData('EMPLOYEE_TYPE') //人员类型
      }
      if (!projectCompanyId) {
        this.formData.uscc = ''
        this.formData.groupId = ''
        this.$store.commit('SET_INFO', ['groupIdOptions', []])
      } else {
        const findOne = this.usccOptions.find(
          (v) => v.code === projectCompanyId
        )
        this.formData.uscc = findOne.uscc
        this.getGroupList({
          projectId: this.projectId,
          uscc: this.formData.uscc,
          projectCompanyId,
        })
        this.formData.groupId = ''
      }
    },

    getSelectData(dicitemType) {
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/findbytype',
        data: {
          type: dicitemType,
        },
      })
        .then((response) => {
          if (dicitemType == 'SEX') {
            this.sexOption = response.data.result
          } else if (dicitemType == 'NATION') {
            this.nationOptions = response.data.result
          } else if (dicitemType == 'EDU') {
            this.eduOptions = response.data.result
          } else if (dicitemType == 'MARRIAGE') {
            this.marrigeOptions = response.data.result
          } else if (dicitemType == 'POLITICAL') {
            this.politicalOptions = response.data.result
          } else if (dicitemType == 'BANK_TYPE') {
            this.bankOptions = response.data.result
          } else if (dicitemType == 'EMPLOYEE_TYPE') {
            this.typeOptions = response.data.result
          } else if (dicitemType == 'WORKER_TYPE') {
            this.workTypeOptions = response.data.result
          } else if (dicitemType == 'UNIT') {
            this.unitOptions = response.data.result
          }
        })
        .catch((response) => {})
    },
    getDetail(employeeId, contractId) {
      this.isSaveLoading = true
      this.axios({
        method: 'post',
        url: 'api-e/cs/build/expand/detail',
        data: {
          employeeId: employeeId,
          id: contractId,
        },
      })
        .then((response) => {
          this.isSaveLoading = false
          var data = response.data.result
          this.formData.employeeName = data.name
          this.formData.idcard = data.idcard
          this.formData.employeeSex = data.sex
          this.formData.employeeBirth = data.birthday
          this.formData.employeeNation = data.nationality
          this.formData.homeAddress = data.address
          this.idcardUrl = data.idcardPhoto
          this.formData.politicalStatus = data.politicalStatus
          this.formData.edu = data.edu
          this.formData.maritalStatus = data.maritalStatus
          this.formData.tel = data.tel
          this.collectImg = data.faceCameraPhoto
        })
        .catch((error) => {
          this.isSaveLoading = false
          console.log(error)
        })
    },
    getBatchInfo(employeeId, contractId) {
      this.isSaveLoading = true
      this.axios({
        method: 'post',
        url: 'api-e/cs/contract/base/detail',
        data: {
          employeeId: employeeId,
          id: contractId,
        },
      })
        .then((response) => {
          this.isSaveLoading = false
          var data = response.data.result
          // this.formData.idcard = data.idcard;
          // this.formData.employeeSex = data.sex;
          // this.formData.employeeBirth = data.birthday;
          // this.formData.homeAddress = data.address;
          // this.formData.employeeNation = data.nationality;
          // this.formData.homeAddress = data.address;
          // this.formData.edu = data.edu;
          // this.formData.maritalStatus = data.maritalStatus;
          this.formData.type = data.type
          this.oldType = data.type
          this.formData.uscc = data.uscc
          this.formData.projectCompanyId = data.projectCompanyId
          this.formData.groupId = data.groupId
          this.formData.bankId = data.bankId
          this.formData.accountId = data.account
          this.formData.workType = data.workType
          this.formData.date = []
          this.formData.date = [data.startDate, data.endDate]
          this.formData.attNo = data.attNo
          this.formData.unit = data.unit
          this.formData.price = data.price
          this.upLoadFile = data.fileExpandVOs
          for (var i = 0; i < this.upLoadFile.length; i++) {
            this.srcList.push(this.upLoadFile[i].url)
            this.oldSrcList.push(this.upLoadFile[i].url)
          }
          if (data.projectCompanyType == '0') {
            this.typeOptions = [
              { name: '总监', code: '810' },
              { name: '监理', code: '820' },
            ]
          } else {
            this.getSelectData('EMPLOYEE_TYPE')
          }
          this.getGroupList({
            projectId: this.projectId,
            uscc: data.uscc,
            projectCompanyId: data.projectCompanyId,
          })
        })
        .catch((error) => {
          this.isSaveLoading = false
          console.log(error)
        })
    },
    //保存跳转到详情
    saveToList() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // 保存更新
          // this.isSaveLoading = true;
          // this.submitFormUptate();
          //班组长替换
          if (this.formData.type == '70') {
            this.replaceGroup()
          } else {
            this.isSaveLoading = true
            this.submitFormUptate()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    replaceGroup() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/contract/expand/findgroupleader',
        data: {
          projectId: this.projectId,
          uscc: this.formData.uscc,
          groupId: this.formData.groupId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              //1.存在班组长  2.当前选择班组长 就弹框提示
              // console.log(this.oldType);
              //   console.log(this.formData.type);
              //    console.log((response.data.result && this.formData.type == '70')&&(this.oldType != '70'));
              // if ((response.data.result.name && this.formData.type == '70')&&(this.oldType != '70')) {
              if (
                response.data.result.name &&
                this.formData.type == '70' &&
                this.formData.idcard != response.data.result.idCard
              ) {
                this.showTip(response.data.result.name)
              } else {
                this.isSaveLoading = true
                this.submitFormUptate()
              }
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    showTip(oldGroup) {
      var html =
        '<div>该班组已设置班组长' +
        oldGroup +
        ',是否替换为' +
        this.formData.employeeName +
        '？替换后' +
        oldGroup +
        '将自动离职'
      ;('</div>')
      this.$confirm(html, '提示', {
        dangerouslyUseHTMLString: true,
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then((action) => {
          this.isSaveLoading = true
          this.submitFormUptate()
        })
        .catch(() => {})
    },
    submitFormUptate() {
      var data = {
        projectId: this.projectId,
        id: this.contractId,
        employeeId: this.employeeId,
        // name: this.formData.employeeName,
        // idcard: this.formData.idcard,
        // address: this.formData.homeAddress,
        // birthday: this.formData.employeeBirth,
        tel: this.formData.tel,
        edu: this.formData.edu,
        nationality: this.formData.employeeNation,
        // sex: this.formData.employeeSex,
        politicalStatus: this.formData.politicalStatus,
        maritalStatus: this.formData.maritalStatus,
        bankId: this.formData.bankId,
        account: this.formData.accountId
          ? this.formData.accountId.replace(/\s+/g, '')
          : '',
        projectName: this.formData.projectName,
        uscc: this.formData.uscc,
        projectCompanyId: this.formData.projectCompanyId,
        type: this.formData.type,
        groupId: this.formData.groupId,
        workType: this.formData.workType,
        // startDate: this.formData.date[0],
        // endDate: this.formData.date[1],
        attNo: this.formData.attNo,
        unit: this.formData.unit,
        price: this.formData.price,
        // employeeImgUrl: JSON.stringify(this.cardFile),
        contractImgUrl: JSON.stringify(this.upLoadFile),
        faceCameraPhoto: this.formData.faceCameraPhoto,
      }
      this.axios({
        method: 'post',
        url: 'api-e/cs/contract/expand/edit',
        data: data,
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            //滁州劳资专管员，若未检测到该人员的劳资信息，则在提示添加成功后弹窗提示
            if (
              this.formData.type == '60' &&
              this.isCzUser() &&
              this.status == '在职'
            ) {
              this.isShowTipLabor()
            } else {
              this.toJump()
            }
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isSaveLoading = false
          }
        })
        .catch((error) => {
          // this.$message.error("保存失败");
          this.isSaveLoading = false
        })
    },
    faceCollection() {
      var that = this
      //判断浏览器兼容性
      if (!this.checkBrowser()) {
        return false
      }
      //点击间隔控制
      // this.perRead();

      var localIp = '127.0.0.1'
      // WebSocket服务的端口（该端口在C++正式上线时，需要指定一个唯一的端口）
      // 另外，这个端口最好是不常用的；再者，C++程序中针对端口这一块，最好多设置几个，当有端口被占用时，循环其他的端口，当然前端JS做同样的处理
      var localPort = '10080'
      // 应用名（或者工程名）
      var appName = 'ws'
      // 服务端WebSocket的访问路径（可自由指定）
      var serverPath = 'webSocket'
      // WebSocket的通道名称
      // 因为WebSocket服务端可以与多个客户端建立连接，为了区分不同的客户端，在客户端发起连接请求时，需要为连接的通道指定唯一标识
      // 因为我们开发的是C++服务端，安装在用户自己电脑上，所以实际应用时，一个服务端也只是对应一个客户端，所以这个channel有没有都没有关系
      var channel = 'zhangsan'
      // WebSocket服务端访问路径
      //var url = "ws://" + localIp + ":" + localPort + "/" + appName + "/" + serverPath + "/" + channel;
      var url = 'ws://' + localIp + ':' + localPort
      // 以上只是为了说明websocket的访问地址的相关组成部分
      // 实际应用中，可以把WebSocket的服务端地址固定下来，就没有必要再定义这么多变量了
      // 例如：var url = "ws://127.0.0.1:8080/ws/webSocket/zhangsan";
      if (this.socket != null) {
        this.socket.close()
        this.socket = null
      }

      if (this.socket == null) {
        this.socket = new WebSocket(url)
        // console.log(this.socket);
        //resultMsg("WebSocket连接【new socket】，socket连接状态："+socket.readyState);
      } else {
        console.log(
          'WebSocket连接已经建立.socket连接状态：' + socket.readyState
        )
      }
      try {
        // WebSocket已经成功建立连接
        this.socket.onopen = function (msg) {
          try {
            // 前端JS向C++的WebScoket服务发送人脸识别的指令
            // C++的WebScoket服务获取到指令后，对指令进行判断
            // C++获取到人脸信息后，把信息放入消息通道即可
            var message = {
              type: 2,
              command: 'ID_FACE_RED',
            }
            that.toOpenFaceCollect()
            //socket.send(JSON.stringify(message));
          } catch (ex) {
            // swal("信息设置异常,请检查是否成功运行【身份证阅读程序.exe】.")
            //resultMsg("【readIDCard】连接异常,请检查是否成功运行【身份证阅读程序.exe】.");
            //resultMsg("【readIDCard】请重新建立WebScoket连接.");
          }
        }
        // WebSocket建立连接失败
        this.socket.onerror = function () {
          $('#openExe').click()
        }
        // 监听WebSocket的消息通道
        // 当消息通道中有消息时，会自动触发该函数
        this.socket.onmessage = function (msg) {
          // 前端可以直接从消息通道中获取到C++发送的消息
          //resultMsg("前端已经监听到WebSocket服务端有消息发来,【onmessage】socket连接状态："+socket.readyState);
          //resultMsg("从WebSocket的消息通道中获取到的身份证信息：");
          //resultMsg("websocket 消息通道："+msg.data);

          if (msg) {
            var returnObj = JSON.parse(msg.data)
            var imageCode = returnObj.ImgCode
            var src = 'data:image/png;base64,' + imageCode

            that.changeFacePic(src)
            // $('#face').attr("src","data:image/png;base64,"+imageCode)
          }
          // 获取到信息后，关闭WebSocket
          // this.socket.close()
          that.closeSocket()
          this.socket = null
        }
      } catch (ex) {}
    },
    toOpenFaceCollect() {
      this.socket.send('ID_FACE_RED')
    },
    changeFacePic(src) {
      this.collectImg = src
      this.uploadBase64(src)
    },
    uploadBase64(src) {
      this.axios({
        method: 'post',
        url: 'api-f/files/upload/base64',
        data: {
          image64: src,
        },
      })
        .then((response) => {
          var arr = []
          arr.push(response.data)
          this.formData.faceCameraPhoto = JSON.stringify(arr)
        })
        .catch((error) => {})
    },
    checkBrowser() {
      if (window.WebSocket) {
        //console.log("This browser supports WebSocket!");
        return true
      } else {
        //console.log("This browser does not support WebSocket.");
        //swal("您的浏览器版本过低\r\n请升级后重试") ;
        this.$message({
          message:
            '我们强烈建议您使用谷歌、火狐、360极速、Opera 等浏览器，如要使用IE，请使用IE10及以上版本',
        })
        return false
      }
    },
    closeSocket() {
      try {
        //resultMsg("closeSocket, socket连接状态："+socket.readyState);
        if (this.socket != null) {
          this.socket.close()
          this.socket = null
        }
        this.cancelKeepAlive()
      } catch (ex) {
        //console.log(ex) ;
      }
    },
    downPFD(url) {
      if (url) {
        window.open(url)
      }
    },
    getFileList(val) {
      this.oldSrcList.push(val)
      this.srcList.push(val)
    },
    getFile(val) {
      this.upLoadFile = val
    },
    isShowTipLabor() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/qualification/expand/getbyaudit',
        data: {
          idcard: this.formData.idcard,
          type: '60', //劳资专管员
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            if (response.data.result === true) {
              //true :跳转 已存在劳资信息不提示，不存在劳资信息提示弹框
              this.showTipLabor()
            } else {
              this.toJump()
            }
          }
        })
        .catch((error) => {})
    },
    showTipLabor() {
      this.$confirm('是否立即添加劳资专管员资质信息?', '提示', {
        dangerouslyUseHTMLString: true,
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then((action) => {
          this.$router.push({
            path: '/home/employee/laborInfoAddCz',
            query: {
              name: this.formData.employeeName,
              idcard: this.formData.idcard,
            },
          })
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/employee/laborInfoCz',
            newUrl: this.$router.currentRoute.fullPath,
          })
        })
        .catch(() => {
          this.toJump()
        })
    },
    toJump() {
      if (this.isFB) {
        this.$router.push({
          path: '/home/employee/projectEmployeeFb',
          query: {
            projectId: this.projectId,
            projectName: this.formData.projectName,
            currentPage: this.currentPage,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/projectEmployeeFb',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push({
          path: '/home/employee/projectEmployeeQY',
          query: {
            projectId: this.projectId,
            projectName: this.formData.projectName,
            currentPage: this.currentPage,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/projectEmployeeQY',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    // 获取是否必填数据
    getIsNeed() {
      return this.axios({
        method: 'post',
        url: 'api-m/fieldconfig/base/getbymaintype',
        data: {
          mainType: 'EMPLOYEE_ADD',
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.list = response.data.result
            this.list.forEach((element) => {
              if (element.code == 'address') {
                //家庭住址
                this.isNeedHomeAddress = element.isNeed
              } else if (element.code == 'bankId') {
                //工资卡银行
                this.isNeedBankId = element.isNeed
              } else if (element.code == 'account') {
                //银行卡号
                this.isNeedAccountId = element.isNeed
              } else if (element.code == 'tel') {
                //手机号码
                this.isNeedTel = element.isNeed
              } else if (element.code == 'edu') {
                //文化程度
                this.isNeedEdu = element.isNeed
              } else if (element.code == 'contractImgUrl') {
                //合同附件
                this.isNeedUpLoadFile = element.isNeed
              } else if (element.code == 'politicalStatus') {
                //政治面貌
                this.isNeedPoliticalStatus = element.isNeed
              } else if (element.code == 'maritalStatus') {
                //婚姻状况
                this.isNeedMaritalStatus = element.isNeed
              } else if (element.code == 'unit') {
                //计量单位
                this.isNeedUnit = element.isNeed
              } else if (element.code == 'attNo') {
                //考勤卡号
                this.isNeedAttNo = element.isNeed
              } else if (element.code == 'price') {
                //计量单价
                this.isNeedPrice = element.isNeed
              }
            })
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  padding: 0;
  form.el-form {
    background: #fff;
    .selectWidth {
      width: 100%;
    }
    .borderTen {
      height: 10px;
      background: #f5f7fa;
    }
    .topCon.improve {
      margin: 0;
      background: #eef1f6;
    }
    .titleInfo {
      background: #e4ebf1;
      width: 108px;
      height: 36px;
      text-align: center;
      color: #fff;
      margin-top: 35px;
      margin-bottom: 20px;
      font: bold 14px/36px Microsoft YaHei;
    }
    .identityInfoTitle {
      background: #02a2aa;
    }
    div.readIdCardBox {
      width: 200px;
      text-align: center;
    }
    .driveDownload {
      color: #0098ce;
      font-size: 11px;
      margin-top: 10px;
      border-bottom: 1px solid #0098ce;
      text-align: center;
      &:hover {
        color: #0070f5;
        border-bottom: 1px solid #0070f5;
      }
    }
    .basicInfoTitle {
      background: #67ace4;
    }
    .contractInfoTitle {
      background: #f9a243;
    }
    .uploadBox {
      position: relative;
      .uploadImg {
        width: 96px;
        height: 36px;
        color: #009588;
        border: 1px solid #009588;
        line-height: 10px;
      }
      .uploadImgState {
        font-size: 14px;
        color: #999999;
        margin-left: 11px;
      }
      .upLoadDom {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        input {
          width: 100px;
          height: 36px;
        }
      }
    }
    .imgStyle {
      padding-left: 100px;
      li {
        position: relative;
        margin-right: 20px;
        margin-top: 10px;
        i {
          position: absolute;
          right: -6px;
          top: -10px;
          font-size: 20px;
        }
      }
    }
    .wageUnit {
      font-size: 14px;
      color: #666;
      padding: 8px 4px 8px 10px;
    }
    .saveBtn {
      background-color: #009588;
      border-color: #009588;
      color: #fff;
    }
  }
  .el-main .el-form-item {
    margin-bottom: 20px;
  }
  .el-date-editor--daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    /* width: 350px; */
    width: 100%;
  }
}
.btnBox {
  width: 100px;
  height: 20px;
  font-size: 0;
  border-radius: 3px;
  border: 1px solid #409eff;
  margin: 0 auto;
  cursor: pointer;
  .imgBox {
    width: 16px;
    height: 100%;
    display: inline-block;
    position: relative;
    .iconImg {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .textBox {
    width: calc(100% - 16px);
    height: 100%;
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    text-align: center;
  }
}
</style>
